<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <template #header>
        <span>查询条件</span>
      </template>
      <el-form label-width="auto">
        <el-row justify="space-between">
          <el-col :span="8">
            <el-form-item label="活动名称">
              <el-input v-model="queryParams.activity_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="活动日期">
              <el-date-picker
                  v-model="queryParams.date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 400px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex;justify-content: right">
            <el-form-item label="具体时间">
              <el-time-select
                  v-model="queryParams.startTime"
                  style="width: 400px"
                  placeholder="具体时间"
                  :picker-options="{
                    start: '00:00',
                    step: '00:15',
                    end: '24:00',
                  }"
              >
              </el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row justify="space-between">
          <el-col :span="8">
            <el-form-item label="活动地点">
              <el-input v-model="queryParams.place"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发布状态">
              <el-select v-model="queryParams.status" placeholder="全部">
                <el-option value="" label="全部"/>
                <el-option value="1" label="已发布"/>
                <el-option value="0" label="未发布"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="display: flex;justify-content: right">
            <el-button type="primary" icon="el-icon-search" @click="Query(1)">查询</el-button>
            <el-button type="primary" icon="el-icon-delete" @click="Reset()">重置</el-button>
          </el-col>
        </el-row>
        <el-row justify="space-between"></el-row>
      </el-form>
    </el-card>
    <el-card>
      <template #header>
        <div style="display: flex;justify-content: space-between">
          <div>
            <span>查询结果</span>
          </div>
          <div>
            <el-button icon="el-icon-plus" type="primary" size="small" @click="showAdd">发布活动</el-button>
          </div>
        </div>
      </template>
      <el-table :data="tableData" border style="margin-bottom: 10px">
        <el-table-column prop="activity_name" label="活动名称" align="center"></el-table-column>
        <el-table-column label="活动时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.date }} {{ scope.row.startTime }}
          </template>
        </el-table-column>
        <el-table-column prop="place" label="活动地点" align="center"></el-table-column>
        <el-table-column prop="status" label="审核状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status==='0'"><span style="color: orange">未审核</span></span>
            <span v-if="scope.row.status==='1'"><span style="color: #00b42a">审核通过</span></span>
            <span v-if="scope.row.status==='2'"><span style="color: #e72f2f">审核不通过</span></span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" style="color: #e72f2f" size="small" @click="showDialog(scope.row, 1)">详情</el-button>
            <el-button type="text" style="color: #e72f2f" size="small" @click="showDialog(scope.row, 2)">编辑</el-button>
            <el-button size="small" type="text" style="color: #e72f2f" @click="showDialog(scope.row, 3)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: right">
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
<!--    <el-row style="margin-top: 30px; margin-left: 30px">-->
<!--      <el-form :inline="true" ref="sel_form">-->
<!--        <el-form-item label="">-->
<!--          <el-input placeholder="请输入活动名" v-model="search_data" class="input-with-select">-->
<!--            <el-button slot="append" type="primary" icon="el-icon-search" @click="fuzzySearch(search_data)">搜索</el-button>-->
<!--          </el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          &lt;!&ndash; 添加按钮DOM &ndash;&gt;-->
<!--          <el-form-item>-->
<!--            <el-button type="success" @click="showAdd()">发布活动</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--    </el-row>-->
    <!-- 删除对话框 -->
    <el-dialog title="删除活动信息" :visible.sync="deleteDialog" width="30%">
      <span>确定要删除这条信息吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialog = false">取 消</el-button>
        <el-button type="primary" @click="DeleteMethod(currentOpt._id)">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改活动信息" :visible.sync="updateDialog" width="30%">
      <el-form :model="activityForm">
        <el-form-item label="活动名称" :label-width="formLableWidth">
          <el-input v-model="currentOpt.activity_name"></el-input>
        </el-form-item>
        <el-form-item label="活动日期" :label-width="formLableWidth">
          <el-date-picker v-model="currentOpt.date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="具体时间" :label-width="formLableWidth">
          <el-time-select placeholder="具体时间" v-model="currentOpt.startTime"
              :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '24:00',
            }"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item label="活动地点" :label-width="formLableWidth">
          <el-input v-model="currentOpt.place"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" :label-width="formLableWidth">
          <el-select v-model="currentOpt.status" disabled>
            <el-option value="0" label="待审核" />
            <el-option value="1" label="通过" />
            <el-option value="2" label="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLableWidth">
          <el-input v-model="currentOpt.remark" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateDialog = false">取 消</el-button>
        <el-button type="primary" @click="UpdateMethod(currentOpt)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加对话框 -->
    <el-dialog title="添加活动信息" :visible.sync="addDialog" width="30%">
      <el-form :model="activityForm">
        <el-form-item label="活动名称" :label-width="formLableWidth">
          <el-input v-model="activityForm.activity_name"></el-input>
        </el-form-item>
        <el-form-item label="活动日期" :label-width="formLableWidth">
          <el-date-picker
              v-model="activityForm.date"
              type="date"
              placeholder="选择日期"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="具体时间" :label-width="formLableWidth">
          <el-time-select placeholder="具体时间" v-model="activityForm.startTime"
              :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '24:00',
            }"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item label="活动地点" :label-width="formLableWidth">
          <el-input v-model="activityForm.place"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="AddMethod">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import router from "../../router.js";
export default {
  mounted() {
    this.Query(1);
  },
  data() {
    return {
      total:0,
      queryParams:{
        activity_name: "",
        date: "",
        startTime: "",
        place: "",
        status: "",
        pageNo: 1
      },
      currentOpt: {
        _id: "",
        activity_name: "",
        place: "",
        date: "",
        startTime: "",
        status:"",
        remark:"",
      },
      // 添加党建活动的表单数据
      activityForm: {
        activity_name: "",
        date: "",
        startTime: "",
        place: "",
        status: "0",
        remark: "",
        participants: [],
      },
      //添加对话框style
      formLableWidth: "80px",
      //展示所有活动信息数组
      tableData: [],
      tableData1: [],
      // 几种对话框的标志位
      deleteDialog: false,
      updateDialog: false,
      filterDialog: false,
      addDialog: false,
      //展示所有用户信息数组的长度
      // odataLength: 0,
    };
  },
  methods: {
    // 切换页号
    handleCurrentChange(val){
      this.Query(1);
    },
    //重置查询表单
    Reset(){
      this.queryParams  = {
        activity_name: "",
        date: "",
        startTime: "",
        place: "",
        status: "",
        pageNo: 1
      }
    },
    // 查询党建活动接口
    async Query(pageNo) {
      this.tableData = [];
      this.tableData1 = [];
      let res = await this.$axios({
        url: "/api/activitylist",
        method: "post",
        data:this.queryParams
      });
      if (res && res.status === 200) {
        // this.$message({showClose: true,message: "查询成功",type: "success",});
        this.total = res.data.pager.Total;
        for (let i = 0; i < res.data.data.length; i++) {
          const temp = JSON.parse(res.data.data[i]);
          this.tableData1.push(temp);
          // temp.date = temp.date + " " + temp.startTime;
          this.tableData.push(temp);
        }
        // this.tableData = res.data.data;
        // this.tableData1 = res.data.data;
      }
    },
    // 删除党建活动
    async DeleteMethod(_id) {
      this.deleteDialog = false;
      let res = await this.$axios({
        url: "/api/deleteactivity",
        method: "post",
        data: {
          _id,
        },
      });
      // console.log(res);
      if (res && res.data.status === 1) {
        this.Query(1);
        this.$message({
          showClose: true,
          message: "删除成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "删除失败",
          type: "error",
        });
      }
    },
    // 修改党建活动接口
    async UpdateMethod(currentOpt) {
      this.updateDialog = false;
      currentOpt.date = this.transformDate(currentOpt.date);
      let {_id, activity_name, date, startTime, place} = currentOpt;
      let res = await this.$axios({
        url: "/api/editactivity",
        method: "post",
        data: {_id, activity_name, date, startTime, place},
      });
      if (res && res.data.status === 1) {
        this.Query(1);
        this.$message({
          showClose: true,
          message: "恭喜你，修改成功",
          type: "success",
        });
      } else {
        this.$message({
          showClose: true,
          message: "修改失败，请检查是否有空信息",
          type: "error",
        });
      }
    },
    // 添加党建活动接口
    async AddMethod() {
      let res = await this.$axios({
        url: "/api/addactivity",
        method: "post",
        data: this.activityForm,
      });
      console.log(res);
      if (res && res.data.status === 1) {
        this.Query(1);
        this.$message({
          showClose: true,
          message: "发布成功",
          type: "success",
        });
        this.addDialog = false;
        this.resetMethod();
      } else {
        this.$message({
          showClose: true,
          message: "发布失败",
          type: "error",
        });
      }
    },
    //展示对话框
    showDialog(row, index) {
      //1---详情
      //2---修改
      //3---删除
      this.currentOpt._id = row._id;
      this.currentOpt.activity_name = row.activity_name;
      this.currentOpt.place = row.place;
      this.currentOpt.status = row.status;
      this.currentOpt.remark = row.remark;
      this.currentOpt.date = row.date;
      this.currentOpt.startTime = row.startTime;
      for (let i = 0; i < this.tableData1.length; i++) {
        if (this.tableData1[i]._id === row._id) {
          this.currentOpt.date = this.tableData1[i].date;
          this.currentOpt.startTime = this.tableData1[i].startTime;
        }
      }
      if (index === 1) {
        //详情
        // console.log(row)
        router.push({name: "activityLog", params: {activity_id: row._id}});
      } else if (index === 2) {
        //修改
        this.updateDialog = true;
      } else {
        //删除
        this.deleteDialog = true;
      }
    },
    // 展示添加对话框
    showAdd() {
      this.resetMethod();
      this.addDialog = true;
    },
    // 重置添加党建信息的表单
    resetMethod() {
      this.activityForm = {
        activity_name: "",
        date: "",
        startTime: "",
        place: "",
        status: "0",
        remark: "",
        participants: [],
      };
    },
    //处理时间格式
    transformDate(param) {
      const date = new Date(param);
      // 提取并格式化年、月、日
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，所以需要+1
      const day = String(date.getDate()).padStart(2, "0"); // 日期可能是1-9，需要补0
      // 组合成年-月-日的格式
      const formattedDate = `${year}-${month}-${day}`;
      return formattedDate;
    },
    // 导入数据
    // handleChange(file, fileList) {
    // 	let reader = new FileReader();
    // 	reader.onload = (e) => {
    // 		let data = new Uint8Array(e.target.result);
    // 		let workbook = XLSX.read(data, {
    // 			type: 'array'
    // 		});
    // 		// 处理sheet1
    // 		let worksheetName = workbook.SheetNames[0];
    // 		let worksheet = workbook.Sheets[worksheetName];
    // 		let jsonData = XLSX.utils.sheet_to_json(worksheet, {
    // 			header: 1
    // 		});
    // 		console.log(jsonData);
    // 		for (let i = 1; i < jsonData.length; i++) {
    // 			this.form.name = jsonData[i][0];
    // 			this.form.sex = jsonData[i][1];
    // 			this.form.age = jsonData[i][2]
    // 			this.form.join_time = jsonData[i][3];
    // 			this.form.work_unit = jsonData[i][4];
    // 			this.form.position = jsonData[i][5];
    // 			this.form.work_status = jsonData[i][6];
    // 			this.AddMethod(this.form);
    // 		}
    // 	}
    // 	reader.readAsArrayBuffer(file.raw);
    // },
    // 导出数据
    // exportExcel() {
    // 	// 处理数据
    // 	let tableData = [];
    // 	for (let i = 0; i < this.odata.length; i++) {
    // 		let obj = {};
    // 		obj.name = this.odata[i].name;
    // 		obj.age = this.odata[i].age;
    // 		obj.sex = this.odata[i].sex;
    // 		obj.join_time = this.odata[i].join_time;
    // 		obj.work_unit = this.odata[i].work_unit;
    // 		obj.position = this.odata[i].position;
    // 		obj.work_status = this.odata[i].work_status;
    // 		tableData.push(obj);
    // 	}
    // 	// 将表格数据转换为工作表
    // 	let worksheet = XLSX.utils.json_to_sheet(tableData);
    // 	// console.log(worksheet);
    // 	worksheet.A1.v = "姓名";
    // 	worksheet.B1.v = "年龄";
    // 	worksheet.C1.v = "性别";
    // 	worksheet.D1.v = "入党时间";
    // 	worksheet.E1.v = "工作单位";
    // 	worksheet.F1.v = "职位";
    // 	worksheet.G1.v = "工作状态";
    // 	// 创建新的工作簿并添加到工作表
    // 	let workbook = XLSX.utils.book_new();
    // 	XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    // 	// 将工作簿写入文件
    // 	let wbout = XLSX.write(workbook, {
    // 		bookType: 'xlsx',
    // 		type: 'array'
    // 	});
    // 	// 使用file-saver保存文件
    // 	try {
    // 		saveAs(new Blob([wbout], {
    // 			type: 'application/octet-stream'
    // 		}), '党员信息.xlsx');
    // 	} catch (e) {
    // 		if (typeof console !== 'undefined') console.log(e, wbout);
    // 	}
    // 	return wbout;
    // },
  },
};
</script>
<style scoped>
.hao {
  height: 40px;
  line-height: 40px;
  text-align: center;
}

.a {
  margin-bottom: 30px;
}
.el-input{
  width: 400px;
}
.el-select{
  width: 400px;
}
</style>